<template>
	<view class="detail">
		<!-- // 顶部轮播 -->
		<swiper class="detailSwiper" indicator-active-color="#0bc9fd" indicator-color="#b3b3b3" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/image/dimg1.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/image/dimg2.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/image/dimg3.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/image/dimg4.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="shop-info">
			<view class="shop-title">
				<label>新品</label>苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果
			</view>
			<view class="shop-summary">
				[11.11提前购，神眷疯狂抢] 平板抢卷立减120元！平板抢卷立减120元！平板抢卷立减120元！平板抢卷立减120元！平板抢卷立减120元！平板抢卷立减120元！平板抢卷立减120元！
			</view>
			<view class="shop-price-sale">
				<view class="shop-price"><text>￥</text>799:00<label>￥550:00</label></view>
				<view class="shop-sale">月售量：5000件</view>
			</view>
		</view>
		
		<view class="shop-assure" @click="showService">
			<view class="shop-assure-item">
				<i class="iconfont">&#xe60d;</i>全场包邮
			</view>
			<view class="shop-assure-item">
				<i class="iconfont">&#xe60d;</i>全场包邮
			</view>
			<view class="shop-assure-more">
				<i class="iconfont">&#xe60b;</i>
			</view>
		</view>
		
		<view class="shop-attr" @click="showAttr">
			<label>规格</label><text>请选择商品规格尺寸</text>
			<i class="iconfont">&#xe60b;</i>
		</view>
		
		<view class="shop-tab">
			<view class="shop-tab-item" @click="tabChange(0)"
				:class="{'tab-active': tab == 0}">
				图文详情
			</view>
			<view class="shop-tab-item" @click="tabChange(1)"
				:class="{'tab-active': tab == 1}">
				规格参数
			</view>
		</view>
		<!-- mode="widthFix"宽度不变 高度自适应变化 保持原图片宽高比不变 -->
		<view class="content" v-if="tab == 0">
			<image src="../../static/image/d1.jpg" mode="widthFix"></image>
			<image src="../../static/image/d2.jpg" mode="widthFix"></image>
			<image src="../../static/image/d3.jpg" mode="widthFix"></image>
		</view>
		
		<view class="shop-specs" v-if="tab == 1">
			<view class="specs-title">
				基础信息
			</view>
			<view class="specs-content">
				<view class="specs-content-left">
					品牌
				</view>
				<view class="specs-content-right">
					魅族
				</view>
			</view>
			<view class="specs-content">
				<view class="specs-content-left">
					品牌
				</view>
				<view class="specs-content-right">
					魅族
				</view>
			</view>
			<view class="specs-content">
				<view class="specs-content-left">
					品牌
				</view>
				<view class="specs-content-right">
					魅族
				</view>
			</view>
		</view>
		// 底部导航栏
		<view class="detail-bottom">
			<view class="bottom-item">
				<view class="bottom-item-index">
					<image src="../../static/tabbar1.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="bottom-item-index">
					<image src="../../static/tabbar3.png" mode=""></image>
					<text>购物车</text>
				</view>
			</view>
			<view class="bottom-button cart-button">
				加入购物车
			</view>
			<view class="bottom-button buy-button">
				立即购买
			</view>
		</view>
		//服务页面
		<detail-service v-if="serviceFlag" @close="closeService"></detail-service>
		<detail-attr v-if="attrFlag" @close="closeAttr"></detail-attr>
		
	</view>
</template>

<script>
	import DetailService from '../../components/detailService.vue'
	import DetailAttr from '../../components/detailAttr.vue'
	export default {
		data() {
			return {
				tab:0,
				serviceFlag:false, // 服务弹窗显示掩藏
				attrFlag:false ,// 属性弹窗显示掩藏
				detail:[]
			}
		},
		components:{
			DetailService,
			DetailAttr
		},
		onLoad(option) {
			console.log(option.id) // uni中获取公共路径传值方法option
			this.getData(option.id) // 调用方法传id的值
		},
		methods: {
			// 获取详情数据
			getData(id){
				uni.request({
					//例url:this.apiUrl + "/index/detail/id/38",
					url:this.apiUrl + "/index/detail/id/"+id,
					success:(res)=>{
						// console.log(res)
						let {data} = res.data
						this.detail = data
						console.log(this.detail)
					}
				})
			},
			tabChange(index){
				this.tab = index
			},
			// 显示服务弹窗
			showService(){
				this.serviceFlag = !this.serviceFlag
			},
			// 关闭服务弹窗
			closeService(){
				this.serviceFlag = !this.serviceFlag
			},
			// 显示属性弹窗
			showAttr(){
				this.attrFlag = !this.attrFlag
			},
			// 关闭属性弹窗
			closeAttr(){
				this.attrFlag = !this.attrFlag
			}
		}
	}
</script>

<style>
.detailSwiper{
	width: 100%;
	height: 525rpx;
}
.detailSwiper image{
	width: 470rpx;
	height: 470rpx;
	display: block;
	margin: 0 auto;
}
.shop-info{
	padding: 0 30rpx;
	border-top: 1rpx solid #e9e9e9;
}
.shop-title{
	line-height: 40rpx;
	font-size: 28rpx;
	color: #000;
	padding-top: 24rpx;
	/* display: flex; */
}
.shop-title label{
	display: block;
	width: 64rpx;
	height: 40rpx;
	color: #fff;
	background: #18bfe1;
	text-align: center;
	float: left;
	margin-right: 10rpx;
}
.shop-summary{
	font-size: 24rpx;
	color: #9a9a9a;
	line-height: 35rpx;
	padding-top: 10rpx;
}
.shop-price-sale{
	line-height: 83rpx;
	height: 83rpx;
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	color: #999;
	border-bottom: 1rpx solid #e9e9e9;
}
.shop-price{
	font-size:36rpx;
	color: #f0415f;
}
.shop-price label{
	font-size: 28rpx;
	text-decoration: line-through;
	margin-left: 10rpx;
	color: #999;
}
.shop-assure{
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 30rpx;
}
.shop-assure-item {
	font-size: 30rpx;
	color: #999;
	margin-right: 20rpx;
	float: left;
}
.shop-assure-item i{
	font-size: 30rpx;
	color:#00c3f5;
}
.shop-assure-more{
	float: right;
	color: #999;
}
.shop-attr{
	line-height: 90rpx;
	padding: 0 30rpx;
	/* padding-left: 30rpx; */
	border-top: 20rpx solid #f7f7f7;
	border-bottom: 20rpx solid #f7f7f7;
	color: #999;
}
.shop-attr label{
	font-size: 30rpx;
}
.shop-attr text{
	font-size: 30rpx;
	color: #000;
	margin-left: 24rpx;
}
.shop-attr i{
	float: right;
	color: #999;
}
.shop-tab{
	height: 80rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #e5e5e5;
	/* justify-content: center; */
}
.shop-tab-item{
	width: 50%;
	text-align: center;
	font-size: 30rpx;
	color: #000;
}
.shop-tab-item.tab-active{
	color: #00c3f5;
}
.content image{width: 100%;display: block;}

.shop-specs{
	margin: 20rpx 30rpx ;
	border: 1rpx solid #e9e9e9;
}
.specs-title{
	font-size: 30rpx;
	color: #000;
	height: 75rpx;
	line-height: 75rpx;
	background-color: #e9e9e9;
	text-indent: 30rpx;
}
.specs-content{
	display: flex;
	line-height: 80rpx;
	border-bottom: 1rpx solid #e9e9e9;
}
.specs-content-left{
	width: 110rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}
.specs-content-right{
	flex: 1;
	text-align: center;
	font-size: 24rpx;
	color: #000;
}

.detail-bottom{
	width: 100%;
	height: 100rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
}
.bottom-item{
	flex: 1;
	display: flex;
	/* align-items: center;
	justify-content: center; */
}
.bottom-item-index{
	width: 50%;
}
.bottom-item-index image{
	width: 40rpx;
	height: 40rpx;
	display: block;
	margin: 10rpx auto 0;
}
.bottom-item-index text{
	color: #999;
	font-size: 30rpx;
	display: block;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}
.bottom-button{
	width: 275rpx;
	color: #fff;
	font-size: 30rpx;
}
.cart-button{
	background: #0ebcef;
	text-align: center;
	line-height: 100rpx;
	flex: 1;
}
.buy-button{
	background:#0e7cfe;
	text-align: center;
	line-height: 100rpx;
}



</style>
